<template>
  <div class="app-container download">
    <nav-bar title="下载" left-arrow fixed placeholder />

    <div class="search-container">
      <div class="search-content">
        <icon-svg icon-class="search" />
        <input class="input" v-model="songId" placeholder="输入songId下载单曲">
        <icon-svg icon-class="xiazai" @click.native="handleDownload(songId)"/>
      </div>
    </div>

<!--    <div class="search-container">
      <div class="search-content">
        <icon-svg icon-class="search" />
        <input class="input" v-model="songId" placeholder="输入歌单ID下载歌单">
        <icon-svg icon-class="error" @click.native="query = ''"/>
      </div>
    </div>-->

  </div>
</template>

<script>
import { download } from 'common/js/axios'
import {GetDownloadSongUrlAsync, GetSongDetailsAsync} from 'api/song'

export default {
  name: 'download',
  data () {
    return {
      List: [],
      isDownload: true, //  是否开启下载
      downloading: false, //  下载中的状态

      songId: null,
      level: 'lossless'
    }
  },
  watch: {
    List (list) {
      console.log(list)
      if (this.isDownload) {
        this.handleDownload()
      }
    }
  },
  methods: {
    async handleDownload (id) {
      let song = null
      this.getSongs([id]).then(data => {
        song = data[0]
        return download(song.url)
      }).then(res => {
        if (res.constructor.name !== 'Blob') return
        console.log(song, res)
        open(window.URL.createObjectURL(res))
        /*
        //  可行
        const link = document.createElement('a')
        const blob = new Blob([res], { type: res.type })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.download = `${song.singer} - ${song.name}.${song.type}`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        */
      }).catch(err => {
        console.log(err)
      })
    },
    getSongs (ids) {
      return Promise.all([
        GetSongDetailsAsync(ids),
        GetDownloadSongUrlAsync(this.level, ids)
      ]).then(res => {
        const [Details, DownloadSongUrls] = res
        const matchStr = '.music.126.net'
        let data = Details.map((item, index) => {
          const Index = DownloadSongUrls[index].url.indexOf(matchStr) + matchStr.length
          return {
            id: item.id,
            name: item.name,
            singer: item.ar.map(singer => singer.name).join('/'),
            album: item.al.name,
            image: item.al.picUrl,
            type: DownloadSongUrls[index].type,
            url: `${location.origin}/download_song` + DownloadSongUrls[index].url.slice(Index)
          }
        })
        return Promise.resolve(data)
      }).catch(err => {
        console.log(err)
        return Promise.reject(err)
      })
      // return GetDownloadSongUrlAsync(this.level, ids)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~common/style/variable.less";
@import "~common/style/mixins.less";

.app-container {

  .search-container {
    margin: 12px;

    .search-content {
      width: 100%;
      height: 40px;
      display: flex;
      background: @color-background-d;
      align-items: center;
      border-radius: 5px;

      svg {
        padding: 8px;
        font-size: @font-size-large;
        color: @color-text-d;
      }
      .input {
        flex: 1;
        font-size: @font-size-medium;
        background: transparent;
      }

    }
  }

}

</style>
